<template>
    <div class="guidance">
        <!-- 跳过引导 -->
        <span v-show="$store.getters.stepIndex !== '1'" class="close-btn fixed" @click="toStep('')">跳过引导</span>

        <!-- 引导第1步 -->
        <div class="step step1" v-show="$store.getters.stepIndex === '1'">
            <p class="title">欢迎使用汽车电子健康档案系统！<br>下面将会演示系统的操作指引哦~</p>
            <div class="flex">
                <p class="tip">请选择您想先了解的操作：</p>
                <span class="close-btn" @click="toStep('')">跳过引导</span>
            </div>
            <div class="upload-btn" @click="toStep('2')">上传维修数据</div>
        </div>

        <!-- 引导第2步 -->
        <div class="step step2" v-show="$store.getters.stepIndex === '2'">
            <p class="title">上传维修数据有2种选择方式：</p>

            <p class="tip">如果您的门店使用汽修管理软件</p>
            <div class="upload-btn" @click="toStep('2-1')">请选择上传非标准结算单</div>

            <p class="tip">如果您的门店无使用汽修管理软件</p>
            <div class="upload-btn" @click="toStep('2-0')">请选择新增结算单</div>
        </div>
        
        <!-- 引导第2-1步 -->
        <div class="step step3" v-show="$store.getters.stepIndex === '2-1'">
            <p class="title">上传非标准结算单操作流程：</p>
            <div class="upload-btn">首页点击【上传非标准结算单】或【健康档案上传】</div>
        </div>
        <div class="upload-file-2-1" v-show="$store.getters.stepIndex === '2-1'" @click="openMenu(1, '2-2')"></div>

        <!-- 引导第2-2步 -->
        <div class="upload-file-2-2" v-show="$store.getters.stepIndex === '2-2'" @click="jump('/uploadStatement', '2-3')"></div>

    </div>
</template>

<script>
    export default {
        data(){
            return {

            }
        },
        methods: {
            toStep(index){
                this.$store.commit('stepIndex', index);
                if(index === ''){   // 跳过引导的时候 跳转到首页
                    this.$router.push('/index');
                }
            },
            openMenu(name, index){
                this.toStep(index);
                this.$emit('open-menu', name);
            },
            jump(path, index){
                this.$router.push(path);
                this.toStep(index);
            }
        }
    }
</script>

<style lang="less">
    .guidance{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1100;
        background: rgba(0, 0, 0, 0.4);

        .close-btn{
            font-size: 16px;
            text-decoration: underline;
            cursor: pointer;
            color: white;
            font-weight: bold;
            &.fixed{
                position: fixed;
                right: 30px;
                top: 20px;
            }
        }

        .step{
            position: absolute;
            color: white;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
            .title{
                font-weight: bold;
                font-size: 32px;
            }
            >.flex{
                margin-top: 50px;
                padding: 0 10px 0 0;
                align-items: center;
            }

            .tip{
                font-size: 18px;
                flex-grow: 1;
                font-weight: bold;
            }

            .upload-btn{
                cursor: pointer;
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                width: 98%;
                border: 3px solid white;
                border-radius: 3px;
                padding: 20px 0;
                margin-top: 5px;
            }
        }
        .step2{
            .tip{
                text-align: center;
                margin-top: 50px;
            }
        }
        .step3{
            top: 30px;
            transform: translate(-50%, 0);
            .title{
                width: 800px;
                text-align: center;
            }
        }
        
        .upload-file-2-1, .upload-file-2-2{
            position: absolute;
            left: 4px;
            width: 243px;
            height: 52px;
            border: 3px dashed white;
            cursor: pointer;
        }
        
        .upload-file-2-1{
            top: @header-height + 52 + 1;
        }
        .upload-file-2-2{
            top: @header-height + 2*52 + 46 + 1;
            &::before{
                content: '点击【上传非标准结算单】';
                position: absolute;
                bottom: 60px;
                left: 10px;
                border: 3px solid white;
                font-weight: bold;
                width: 350px;
                font-size: 18px;
                padding: 20px 0;
                color: white;
                text-align: center;
                border-radius: 3px;
            }
        }
    }
</style>
